window.addEventListener('load', () => {
    //获取变量
    const info = document.querySelector('.page-main .box .info')
    const read = document.querySelector('.page-main .box .read-info')
    const listTits = document.querySelectorAll('.shop-list-title li')
    const listTit = document.querySelector('.shop-list-title')
    const dian = document.querySelectorAll('.left .dian')
    const shopList = document.querySelector('.shop-list ol')
    const icon = document.querySelector('.section .icon')

    //获取头部的li分类变量
    const headList = document.querySelector('.section .list')
    const headLists = document.querySelectorAll('.section .list li')
        //获取排序方式变量
    const sortList = document.querySelector('.sort select')
        //获取左边列表的变量
    const range = document.querySelector('.range-con ul')
    const ranges = document.querySelectorAll('.range-con ul li')
    const category = document.querySelector('.category-con ul')
    const categorys = document.querySelectorAll('.category-con ul li')
    const grade = document.querySelector('.grade-con ul')
    const grades = document.querySelectorAll('.grade-con ul li')

    //获取用户id
    const uid = cookie('uname')
    if (uid) {
        var str = `
    <li title="联系我们">
                        <img src="./images/phone.png" width="30">
                        </li>
                        <li title="购物车">
                            <img src="./images/cart.png" width="30">
                        </li>
                        <li title=用户">
                           <div style="padding-top:10px;box-sizing:border-box;margin:0 10px">欢迎<span style="color:#0199D5;font-size:"18px">${uid}</span>用户</div>
                        </li> 
                        <li title=注销"  style="padding-top:10px;box-sizing:border-box;" class='exit'><a>注销</a></li>    
    `
        icon.innerHTML = str
            //退出登陆事件
        getExit()
    }
    //退出登录的方法
    function getExit() {
        const exit = document.querySelector('.exit')
        exit.onclick = function() {
            location.href = './home.html'
        }
    }
    // let shopInfo
    //点击阅读有关，显示info信息
    var flag = 0
    read.onclick = function() {
            if (flag == 0) {
                info.style.display = 'block'
                flag = 1
            } else {
                info.style.display = 'none'
                flag = 0
            }
        }
        //点击相应的箭头，显示里面的内容，再点击时隐藏
    for (let i = 0; i < dian.length; i++) {
        dian[i].onclick = function() {
            if (this.parentElement.nextElementSibling.style.display == 'block') {
                this.parentElement.nextElementSibling.style.display = 'none'
                this.innerText = '↓'
            } else {
                this.parentElement.nextElementSibling.style.display = 'block'
                this.innerText = '↑'

            }
        }
    }
    //放内容的方法
    function getInner(res) {
        var str = ''
        for (var i = 0; i < res.length; i++) {
            str += `
                    <li class="lazyload">
                        <img src="https:${res[i].psimg}" width="100%" class="lazyload">
                        <p class="title">${res[i].pstitle}</p>
                        <ul>
                            <li>${res[i].cpu}</li>
                            <li>${res[i].win}</li>
                            <li>${res[i].Gcard}</li>
                            <li>${res[i].Memory}</li>
                            <li>${res[i].monitor}</li>
                            <li>${res[i].hardDisk}</li>
                        </ul>
                        <div class="price">
                            <del class="old-p">${res[i].yuanjia}</del>
                            <p class="new">低至
                                <span class="new-p">&nbsp;${res[i].price}</span>
                            </p>
                            <p style="margin-bottom: 10px;">节省了：<span class="sale"> ${res[i].zhekou}</span></p>
                            <p class="sale">日常销售价${res[i].yuanjia}，抢购价${res[i].price}</p>
                            <p class="sale">国庆优惠价，限时限量抢购！</p>
                        </div>
                        <p>
                            <img src="./images/transport.png" class="trans" width="40" height="40">
                        </p>
                        <button class="addCart">加入购物车</button>
                    </li>
                    `
        }
        //渲染进去
        shopList.innerHTML = str
        getCart(res)
        getImg(res)
    }
    //点击事件
    //头部图标的点击事件 - 事件委托
    icon.addEventListener('click', e => {
            const target = e.target || e.srcElement
            if (target.title == '登陆') {
                console.log(target.title);
                location.href = './login.html'
            }
            if (target.title == '注册') {
                location.href = './register.html'
            }
            if (target.title == '购物车') {
                location.href = './cart.html'
            }
            console.log(target.title);
        })
        //头部列表点击事件 - 事件委托
    headList.addEventListener('click', e => {
        const target = e.target || e.srcElement
            //判断是哪个按钮
        const text = target.innerText
        for (i = 0; i < headLists.length; i++) {
            headLists[i].style.color = '#5a5a5a'
        }
        if (target.tagName == 'LI') {
            target.style.color = '#0096d6'
        }
        getList(text)
        if (text == '支持') {
            alert('感谢您对惠普的支持！！  客服电话：400-820-111')
        }
        if (text == '企业解决方案') {
            alert('有任何问题都可拨打企业电话！！  企业电话：440-810-111')
        }
    })

    //中间商品列表点击 - 事件委托
    listTit.addEventListener('click', e => {
            const target = e.target || e.srcElement
                //判断是哪个按钮
            const text = target.innerText
                //点击商品列表的主题出现下划线
            for (var i = 0; i < listTits.length; i++) {
                listTits[i].style.borderBottom = '1px solid #ccc'
            }
            if (target.tagName == 'LI') {
                target.style.borderBottom = '3px solid #bbb'
            }
            if (target.tagName == 'LI' || target.tagName == 'SPAN') {
                //对应内容发生变化
                getList(text)
            }

        })
        //排序方式点击 - 事件委托
    sortList.addEventListener('click', e => {
            const target = e.target || e.srcElement
                //判断是哪个按钮
            const value = target.value
            getList(value)
        })
        //左边列表点击 - 事件委托
        // let overlay //左边点击叠加的res
    range.addEventListener('click', e => {
        const target = e.target || e.srcElement
        const text = target.innerText
        for (i = 0; i < ranges.length; i++) {
            ranges[i].style.color = '#5a5a5a'
        }
        target.style.color = '#0096d6'
        getList(text)
    })
    category.addEventListener('click', e => {
        const target = e.target || e.srcElement
        const text = target.innerText
        for (i = 0; i < categorys.length; i++) {
            categorys[i].style.color = '#5a5a5a'
        }
        target.style.color = '#0096d6'
        getList(text)
    })
    grade.addEventListener('click', e => {
            const target = e.target || e.srcElement
            const text = target.innerText
            for (i = 0; i < grades.length; i++) {
                grades[i].style.color = '#5a5a5a'
            }
            target.style.color = '#0096d6'
            getList(text)
        })
        //默认显示
    getList()
        //请求商品列表方法
    function getList(o) {
        promiseAjax({
            url: './json/daierData.json',
        }).then(res => {
            //判断点击的是什么头部的列表按钮
            let jx = []
            if (o == '家庭版笔记本' || o == '家用笔记本') {
                const reg = /家庭版/
                for (var i = 0; i < res.length; i++) {
                    if (reg.test(res[i].win)) {
                        jx.push(res[i])
                    }
                }
                jx.sort(randomsort)
                getInner(jx)
            }
            if (o == '高评分笔记本' || o == '高评分') {
                for (var i = 0; i < res.length; i++) {
                    if (+res[i].pingfen == 5.0) {
                        jx.push(res[i])
                    }
                }
                jx.sort(randomsort)
                getInner(jx)
            }
            if (o == '优惠' || o == '查看全部优惠') {
                for (var i = 0; i < res.length; i++) {
                    if (res[i].zhekou) {
                        jx.push(res[i])
                    }
                }
                jx.sort(randomsort)
                getInner(jx)
            }
            if (o == '商务本' || o == '商务笔记本') {
                const reg = /商务/
                for (var i = 0; i < res.length; i++) {
                    if (reg.test(res[i].pstitle)) {
                        jx.push(res[i])
                    }
                }
                jx.sort(randomsort)
                getInner(jx)
            }
            if (o == '高性能商务本') {
                const reg = /高性能商务/
                for (var i = 0; i < res.length; i++) {
                    if (reg.test(res[i].pstitle)) {
                        jx.push(res[i])
                    }
                }
                jx.sort(randomsort)
                getInner(jx)
            }
            if (o == '轻薄本') {
                const reg = /轻薄/
                for (var i = 0; i < res.length; i++) {
                    if (reg.test(res[i].pstitle)) {
                        jx.push(res[i])
                    }
                }
                jx.sort(randomsort)
                getInner(jx)
            }
            if (o == '大屏显示') {
                const reg = /15\.6/
                for (var i = 0; i < res.length; i++) {
                    if (reg.test(res[i].monitor)) {
                        jx.push(res[i])
                    }
                }
                jx.sort(randomsort)
                getInner(jx)
            }
            if (o == 'recommend') {
                jx = res.sort(randomsort)
                getInner(jx)
            }
            if (o == '价低') {
                const reg = /\d+[\.]\d+/
                for (var j = 0; j < res.length - 1; j++) {
                    for (var i = 0; i < res.length - 1 - j; i++) {
                        if (+res[i].price.match(reg)[0] > +res[i + 1].price.match(reg)[0]) {
                            var c = res[i]
                            res[i] = res[i + 1]
                            res[i + 1] = c
                        }
                    }
                }
                jx = res
                getInner(jx)
            }
            if (o == '价高') {
                const reg = /\d+[\.]\d+/
                for (var j = 0; j < res.length - 1; j++) {
                    for (var i = 0; i < res.length - 1 - j; i++) {
                        if (+res[i].price.match(reg)[0] < +res[i + 1].price.match(reg)[0]) {
                            var c = res[i]
                            res[i] = res[i + 1]
                            res[i + 1] = c
                        }
                    }
                }
                jx = res
                getInner(jx)
            }
            if (o == '折低') {
                const reg = /\d+[\.]\d+/
                for (var j = 0; j < res.length - 1; j++) {
                    for (var i = 0; i < res.length - 1 - j; i++) {
                        if (+res[i].zhekou.match(reg)[0] > +res[i + 1].zhekou.match(reg)[0]) {
                            var c = res[i]
                            res[i] = res[i + 1]
                            res[i + 1] = c
                        }
                    }
                }
                jx = res
                getInner(jx)
            }
            if (o == '折高') {
                const reg = /\d+[\.]\d+/
                for (var j = 0; j < res.length - 1; j++) {
                    for (var i = 0; i < res.length - 1 - j; i++) {
                        if (+res[i].zhekou.match(reg)[0] < +res[i + 1].zhekou.match(reg)[0]) {
                            var c = res[i]
                            res[i] = res[i + 1]
                            res[i + 1] = c
                        }
                    }
                }
                jx = res
                getInner(jx)
            }
            if (jx.length == 0) {
                getInner(res)
            }
        })
    }
    //点击添加购物车按钮的事件
    function getCart(res) {
        const adds = document.querySelectorAll('.addCart')
        for (let i = 0; i < adds.length; i++) {
            adds[i].onclick = function() {
                //跳转到info页面，将相应的id作为参数传过去
                location.href = './info.html?id=' + res[i].pid
            }
        }
    }
    //点击购物车图片的事件
    function getImg(res) {
        const cartImg = document.querySelectorAll('.trans')
            //点击购物车图片时， 跳到详情页， 带参数id
        for (let i = 0; i < cartImg.length; i++) {
            cartImg[i].onclick = function() {
                location.href = './info.html?id=' + res[i].pid
            }
        }
    }
    //数组的随机排序
    function randomsort(a, b) {
        return Math.random() > .5 ? -1 : 1;
    }
})